<!-- 通信总结 -->
<!-- 子在声明响应式数据后，用defineExpose暴露，父用useTemplateRef声明一个数据在挂载的时候接收，若子传输的是一个方法
 父也可使用 -->
<template>
  <div>
    <!-- ref属性作用：引用DOM节点和组件 -->

    <!-- 引用DOM节点 -->
    <h1 ref="h1Ele">App</h1>
    <!-- 引用组件 -->
    <ChildCom ref="childComRef" />
  </div>

  <div class="kai">
    <h1>炎龙</h1>
    <ul class="list">
      <li>风影</li>
      <li>黑犀</li>
      <li>地虎</li>
    </ul>
  </div>

</template>

<script setup>
import ChildCom from './ChildCom.vue';
import { useTemplateRef, onMounted } from 'vue';
const h1EleRef = useTemplateRef('h1Ele')
const childComRef = useTemplateRef('childComRef')

onMounted(() => {
  console.log(h1EleRef.value.innerText)
  console.log(childComRef.value.firstName)
  console.log(childComRef.value.lastName)
  console.log(childComRef.value.setUsername)
  childComRef.value.setUsername()

})
</script>

<style lang="scss" scoped>
$background-color: skyblue;
.kai{
  border: 1px solid black;
  background-color: yellow;

  h1{
    background-color: $background-color;
  }

  .list {
    background-color: blue;

    li{
      color: red;
      list-style-type: none;
      background-color: $background-color;

      &:hover{
        font-size: 39px;
        cursor: pointer;
      }
    }
  }
}
</style>